/**
 * @param{string} label picker的title
 * @param{number} cols picker显示几列
 * @param{function} handlePickerChange 点击确定的回调
 */
import React, { useState } from 'react';
import { Picker, List } from 'antd-mobile';
import './index.less';

export default function SelfPicker(props) {
  const {
    label,
    cols,
    pickerData,
    handleOnPickerChange,
    handlePickerChange,
  } = props;
  const [pickerVal, setPickerVal] = useState('');
  function handleOnOk(val) {
    handlePickerChange(
      val.filter(item => item !== ''),
      label,
    );
    setPickerVal(val.filter(item => item !== ''));
  }
  function handleOnPicker(val) {
    handleOnPickerChange && handleOnPickerChange(val);
  }
  return (
    <div className="selfPicker">
      <Picker
        data={pickerData}
        value={pickerVal}
        cols={cols}
        extra={label}
        onOk={handleOnOk}
        onPickerChange={handleOnPicker}
      >
        <List.Item arrow="down"></List.Item>
      </Picker>
    </div>
  );
}
